<template>
  <div class="dashboard-container" v-loading="loading">
    <div class="app-container">
      <el-card class="tree-card">
        <TreeTools
          :treeNode="company"
          :isRoot="true"
          class="header"
          @addDep="addDepFn"
        />
        <el-tree :data="depts" :props="defaultProps" default-expand-all>
          <template v-slot="{ data }">
            <TreeTools
              :treeNode="data"
              @updateDeps="getDepartments"
              @addDep="addDepFn"
              @editDep="editDepFn"
            />
          </template>
        </el-tree>
      </el-card>
    </div>
    <AddDep
      :visible.sync="addVisible"
      :currentNode="currentNode"
      :originDepts="originDepts"
      ref="addDep"
      @updateDeps="getDepartments"
    />
  </div>
</template>

<script>
import TreeTools from "./components/TreeTools.vue";
import AddDep from "./components/AddDep.vue";
import { getDepartments } from "@/api/department";
import { tranListToTreeData } from "@/utils";
export default {
  data() {
    return {
      defaultProps: {
        label: "name",
      },
      company: { name: "harry课堂" },
      person: {
        uanme: "hhary",
      },
      depts: [],
      addVisible: false,
      currentNode: {},
      originDepts: [],
      loading: false
    };
  },
  components: {
    TreeTools,
    AddDep,
  },
  created() {
    this.getDepartments();
  },
  methods: {
    async getDepartments() {
      try {
        this.loading = true
        const res = await getDepartments();
        this.originDepts = res.depts;
        this.depts = tranListToTreeData(res.depts, "");
        this.company = {
          name: res.companyName,
          manager: "负责人",
          children: this.depts,
        };
      } finally {
        this.loading = false
      }
    },
    addDepFn(currentNode) {
      this.addVisible = true;
      this.currentNode = currentNode;
    },
    editDepFn(node) {
      console.log('node', node)
      this.addVisible = true
      this.$refs.addDep.formData = { ...node, children: '' }
    }
  },
};
</script>

<style scoped>
.tree-card {
  padding: 30px 60px;
  font-size: 14px;
}
.header {
  height: 30px;
}
</style>
